<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy</title>
</head>

<body>

    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        var data = {
            name: '小笑残虹',
            age: 18
        }

        box.innerHTML = data.age

        // data.age = 21;
        // console.log(data);

        let p = new Proxy(data, {
            // set()可以监听一个对象中数据的变化
            set(target, prop, newvalue) {
                console.log('set....', target, prop, newvalue);
                return Reflect.set(...arguments);
            },
            // 当读取一个对象里面的值时会触发get(),用于拦截对象的读操作
            get(target, prop) {
                console.log('get....', target, prop);
                return Reflect.get(...arguments);
            }
        });

        p.age = 21;
        console.log(p.name)
    </script>
</body>

</html>